<template>
	<div :class="ns.b()">
		<el-button
			v-for="(item, index) in options"
			size="small"
			:style="{ width: item.width }"
			:class="ns.e('item')"
			:type="item.type"
			@click="onBntClick(item)"
			:key="index"
		>
			{{ item.name }}
		</el-button>
	</div>
</template>

<script lang="ts" setup>
import { useNamespace } from "@/hooks";
import { ButtonGroupOptions } from "./type";
const ns = useNamespace("btn-groups");
defineProps<{ options: ButtonGroupOptions[] }>();
const onBntClick = (item: ButtonGroupOptions) => {
	item.callback && item.callback();
};
</script>

<style lang="scss" scoped>
$group-btn-space: 20px;

@include block(btn-groups) {
	display: flex;
	flex-flow: wrap;

	@include element(item) {
		margin-right: $group-btn-space;
		margin-bottom: $group-btn-space;
		margin-left: 0;

		&:last-child {
			margin-right: 0;
		}
	}
}
</style>
